<template>
	<view class="groupactiveticket">
		<block v-if="showGroupactiveinfo">
			<view class="ticket_top_box">
				<image class="ticket_top_img" :src="onlinePic+'fansmeeting/tacket_top_bk.png'" mode="widthFix">
				</image>
			</view>
			<view v-if="auditinfo.group_status==0" class="groupactiveticket_box">
				<image class="ticket_img" :src="picUrl+auditinfo.ticket_poster" mode="widthFix"></image>
				<view
					:class="auditinfo.sign_status==0?'ticket_status ticket_status_unused':'ticket_status ticket_status_used'">
					{{auditinfo.sign_status==0?'未使用':'已使用'}}
				</view>
			</view>
			<view v-if="auditinfo.group_status==0" class="groupactiveticket_btn_box">
				<view class="text-c" @click="downloadTicket(auditinfo.ticket_poster)">
					<image class="ticket_btn_icon" :src="onlinePic+'fansmeeting/ticket_download_icon.png'"></image>
					<view class="f-14 mt-5">下载</view>
				</view>
				<view class="text-c" @click="shareTicket(auditinfo.ticket_poster)">
					<image class="ticket_btn_icon" :src="onlinePic+'fansmeeting/ticket_share_icon.png'"></image>
					<view class="f-14 mt-5">分享</view>
				</view>
			</view>

			<view v-if="auditinfo.group_status==1" class="tame_ticket_box">
				<view v-for="(item,index) in auditinfo.group_arr" :key="index" class="tame_ticket_cell">
					<view class="fans_num_box" @click="showFansTeamInfo(1)">
						<view class="flex-1 f-14 f-w" style="padding: 30rpx 0;">
							粉丝/车主(团体票，第{{index+1}}位)</view>
						<view class="pd-30">
							<image v-if="item.showInfo==1" class="fans_num_arrow"
								:src="onlinePic+'fansmeeting/arrow_down.png'"></image>
							<image v-else class="fans_num_arrow" :src="onlinePic+'fansmeeting/arrow_up.png'">
							</image>
						</view>
					</view>
					<block v-if="item.showInfo==1">
						<view class="pd-30" style="position: relative;">
							<image class="ticket_img" :src="picUrl+item.ticket_poster" mode="widthFix"></image>
							<view
								:class="item.sign_status==0?'ticket_status ticket_status_unused':'ticket_status ticket_status_used'">
								{{item.sign_status==0?'未使用':'已使用'}}
							</view>
						</view>
						<view class="groupactiveticket_btn_box mb-15">
							<view class="text-c" @click="downloadTicket(item.ticket_poster)">
								<image class="ticket_btn_icon" :src="onlinePic+'fansmeeting/ticket_download_icon.png'">
								</image>
								<view class="f-14 mt-5">下载</view>
							</view>
							<view class="text-c" @click="shareTicket(item.ticket_poster)">
								<image class="ticket_btn_icon" :src="onlinePic+'fansmeeting/ticket_share_icon.png'">
								</image>
								<view class="f-14 mt-5">分享</view>
							</view>
						</view>
					</block>
				</view>
			</view>
			<image class="ticket_bk_bottom" :src="onlinePic+'fansmeeting/tacket_bottom_bk.png'" mode="widthFix">
			</image>
		</block>
		<view class="fansmeeting_share_box" v-if="showShareTimeImg">
			<image style="width: 100%;" :src="onlinePic+'fansmeeting/fansmeeting_share_zh.jpg'" mode="widthFix">
			</image>
		</view>
	</view>
</template>

<script>
	import {
		getGroupActiveInfo,
		getUserGroupActiveAuditInfo,
		getZHActiveInfo,
	} from '@/api/motortime.js';
	let app = getApp()
	export default {
		data() {
			return {
				club_id: '',
				huodong_id: '',
				channel: '',
				info: {},
				auditinfo: {},
				zhinfo: '',
				showInfo: 0,
				showGroupactiveinfo: false,
				showShareTimeImg: false,
				picUrl: app.globalData.picUrl,
				onlinePic: app.globalData.onlinePic,
				pdbottom: uni.getSystemInfoSync().safeAreaInsets.bottom ? uni.getSystemInfoSync().safeAreaInsets.bottom +
					60 : 60,
				safeBottom: uni.getSystemInfoSync().safeAreaInsets.bottom > 0 ? true : false,
				pageSafeArea: uni.getSystemInfoSync().safeAreaInsets.bottom ? uni.getSystemInfoSync().safeAreaInsets
					.bottom + 140 : 150,
				bottomSafeArea: uni.getSystemInfoSync().safeAreaInsets.bottom ? uni.getSystemInfoSync().safeAreaInsets
					.bottom : 15
			};
		},
		onShow() {
			if (!uni.getStorageSync('access_token')) {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			} else {
				this.userinfo = uni.getStorageSync('userinfo')
			}
			if (uni.getStorageSync('onload')) {
				this.getGroupActiveInfo()
				if (this.huodong_id == 160) {
					this.getZHActiveInfo()
				} else {
					this.getUserGroupActiveAuditInfo()
				}
				uni.removeStorage({
					key: 'onload'
				})
			}
		},
		onLoad(options) {
			this.huodong_id = options.huodong_id ? options.huodong_id : ''
			this.huodong_club_id = options.club_id ? options.club_id : ''
			this.channel = options.channel ? options.channel : ''
			if (uni.getStorageSync('access_token')) {
				this.getGroupActiveInfo()
				if (this.huodong_id == 160) {
					this.getZHActiveInfo()
				} else {
					this.getUserGroupActiveAuditInfo()
				}
				uni.showLoading({})
			}
			if (uni.getStorageSync('Appoptions').scene == 1154) {
				this.showShareTimeImg = true
			} else if (uni.getStorageSync('Appoptions').scene == 1155) {
				uni.reLaunch({
					url: '/pages/group/groupactiveinfo?huodong_id=' + this.huodong_id +
						'&club_id=' + this
						.huodong_club_id + '&channel=' + this.channel,
				})
			} else {
				this.showShareTimeImg = false
			}
		},
		methods: {
			getGroupActiveInfo() {
				getGroupActiveInfo({
					huodong_id: this.huodong_id
				}).then(res => {
					if (res.state == 1) {
						this.info = res.data.info
						this.club_id = res.data.info.club_id
						var params = {
							event_code: '车友会门票',
							path: 'pages/group/groupactiveticket',
							event_id: this.huodong_id,
							title: res.data.info.title,
							source_page: '',
							value: this.channel ? this.channel : '',
						}
						app.BurialPoint(params)

					} else {
						uni.showToast({
							title: res.error[0],
							mask: true,
							icon: 'none',
							duration: 1500
						})
					}
				})
			},
			getUserGroupActiveAuditInfo() {
				getUserGroupActiveAuditInfo({
					huodong_id: this.huodong_id,
					channel: this.channel ? this.channel : ''
				}).then(res => {
					if (res.state == 1) {
						this.auditinfo = res.data.info
						var list = res.data.info.group_arr
						if (list.length > 0) {
							this.auditinfo.group_arr = list.map(item => ({
								...item,
								showInfo: 1
							}));
						}
						uni.hideLoading()
						this.showGroupactiveinfo = true
						if (res.data.info.status != 1) {
							uni.reLaunch({
								url: '/pages/group/groupactiveinfo?huodong_id=' + this.huodong_id +
									'&club_id=' + this
									.huodong_club_id + '&channel=' + this.channel,
							})
						}
					} else {
						uni.hideLoading()
						uni.showToast({
							title: res.error[0],
							mask: true,
							icon: 'none',
							duration: 1500
						})
					}
				})
			},
			getZHActiveInfo() {
				getZHActiveInfo({
					huodong_id: this.huodong_id,
					channel: this.channel ? this.channel : ''
				}).then(res => {
					if (res.state == 1) {
						uni.hideLoading()
						this.zhinfo = res.data.info
						this.huodong_join_id = res.data.info.huodong_join_id ? res.data.info.huodong_join_id : 0
						if (res.data.info.huodong_join_id > 0) {
							this.showGroupactiveinfo = true
						} else {
							if (res.data.info.surveyed_status == 0) {
								uni.reLaunch({
									url: '/pages/questionnaire/questionnaire?scene=' + res.data.info
										.surveyed_id + '&huodong_join_id=' + res.data.info
										.huodong_join_id + '&huodong_id=' + this.huodong_id +
										'&channel=' + this.channel
								})
							} else {
								if (res.data.info.refund_status == 2) {
									uni.reLaunch({
										url: '/pages/group/groupactiveaudit?huodong_id=' +
											this.huodong_id +
											'&channel=' + this
											.channel
									})
								} else {
									if (res.data.info.project_pay_status == 1 && res.data.info
										.project_pay_update_status == 0) {
										uni.redirectTo({
											url: '/pages/group/groupactivepay?huodong_id=' + this
												.huodong_id +
												'&channel=' + this
												.channel + '&huodong_join_id=' + res.data.info
												.huodong_join_id +
												'&is_update=1'
										})
									}
									if (res.data.info.project_pay_status == 0) {
										uni.redirectTo({
											url: '/pages/group/groupactivepay?huodong_id=' + this
												.huodong_id +
												'&channel=' + this
												.channel + '&huodong_join_id=' + res.data.info
												.huodong_join_id +
												'&is_update=0'
										})
									}
									if (res.data.info.project_pay_status == 1 && res.data.info
										.project_pay_update_status == 1) {
										uni.redirectTo({
											url: '/pages/group/groupactiveaudit?huodong_id=' +
												this.huodong_id +
												'&channel=' + this
												.channel
										})
									}
								}
							}
						}
					} else {
						uni.hideLoading()
						uni.showToast({
							title: res.error[0],
							mask: true,
							icon: 'none',
							duration: 1500
						})
					}
				})
			},
			showFansTeamInfo(index) {
				this.showInfo = this.showInfo == index ? 0 : index
			},
			downloadTicket(imgurl) {
				var url = this.picUrl + imgurl
				uni.showLoading({
					title: '正在保存'
				})
				var that = this
				uni.downloadFile({
					url: url,
					success: function(res) {
						var tempFilePath = res.tempFilePath
						uni.authorize({
							scope: 'scope.writePhotosAlbum',
							success() {
								uni.saveImageToPhotosAlbum({
									filePath: tempFilePath,
									success: function() {
										uni.showToast({
											title: '保存成功了',
											icon: 'success',
											duration: 1500
										});
										setTimeout(function() {
											uni.hideLoading()
										}, 1000)
										console.log('save success');
									},
									fail(e) {
										uni.hideLoading()
										uni.showToast({
											title: '下载失败,请重试',
											icon: 'none',
											duration: 1500
										});
									}
								});
							},
							fail() {
								uni.hideLoading()
								uni.showToast({
									title: '您未授权相册权限',
									icon: 'none',
									duration: 1500
								});
							}
						})
					},
					fail() {
						uni.hideLoading()
					}

				})
			},
			shareTicket(imgurl) {
				var url = this.picUrl + imgurl
				uni.downloadFile({
					url: url,
					success: (res) => {
						wx.showShareImageMenu({
							path: res.tempFilePath
						})
					}
				})
			}
		},
		onShareAppMessage(res) {
			app.getShareTask()
			return {
				title: this.info.title,
				path: '/pages/group/groupactiveinfo?huodong_id=' + this.huodong_id + '&club_id=' + this
					.huodong_club_id + '&channel=' + this.channel + '&invitation_id=' + uni.getStorageSync(
						'userinfo') ? uni.getStorageSync('userinfo').user_id : '',
				imageUrl: this.info.share_pic ? this.picUrl + this.info.share_pic : this.picUrl + this.info.pic
			}
		},
		onShareTimeline: function() {
			app.getShareTask()
			return {
				title: this.info.title,
				query: 'huodong_id=' + this.huodong_id + '&club_id=' + this
					.huodong_club_id + '&channel=' + this.channel + '&invitation_id=' + uni.getStorageSync(
						'userinfo') ? uni.getStorageSync('userinfo').user_id : '',
				imageUrl: this.info.share_pic ? this.picUrl + this.info.share_pic : this.picUrl + this.info.pic
			}
		},
	}
</script>

<style lang="scss">
	.groupactiveticket {
		.ticket_top_box {
			width: 100%;
			position: sticky;
			top: 0;
			left: 0;
			right: 0;
			z-index: 1;
			background-color: #ffffff;

			.ticket_top_img {
				width: 100%;
				vertical-align: middle;
			}
		}

		.groupactiveticket_box {
			position: relative;
			margin-top: 40rpx;
			padding: 0 70rpx;
		}

		.ticket_status {
			font-size: 24rpx;
			padding: 7rpx 18rpx;
			position: absolute;
			right: 92rpx;
			top: 211rpx;
			border-radius: 4rpx;
		}

		.ticket_status_used {
			color: #7E7E7E;
			background-color: #B6B6B6
		}

		.ticket_status_unused {
			color: #000000;
			background-color: #44F56A;
		}

		.tame_ticket_box {
			margin-top: 40rpx;
			padding: 0 40rpx;
			padding-bottom: 200rpx;

			.tame_ticket_cell {
				margin-bottom: 50rpx;
				border-radius: 8rpx;
				border: 2rpx solid #999999;
				background-color: #ffffff;

				.fans_num_box {
					color: #ffffff;
					display: flex;
					align-items: center;
					font-size: 24rpx;
					padding: 0 0 0 30rpx;
					border: 2rpx solid #000000;
					border-top-left-radius: 8rpx;
					border-top-right-radius: 8rpx;
					background-color: #000000;


					.fans_num_arrow {
						width: 22rpx;
						height: 13rpx;
						filter: invert(100%);
					}
				}
			}


		}

		.ticket_img {
			width: 100%;
			vertical-align: middle;
		}

		.groupactiveticket_btn_box {
			margin-top: 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-evenly;

			.ticket_btn_icon {
				width: 90rpx;
				height: 90rpx;
			}
		}

		.ticket_bk_bottom {
			width: 100%;
			vertical-align: middle;
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			z-index: -1;
		}
	}
</style>